<template>
  <div class="repayment-confirm">
    <div class="repayment-confirm-top">
      <i @click="repaymentConfirmBack"></i>
      <p class>确认还款</p>
    </div>
    <div class="repayment-confirm-mid">
      <div class="repayment-confirm-mid-top">
        <h4>还款金额</h4>
        <div class="repayment-groups" v-for="(item,index) in list" :key="index">
          <p>
            {{item.amount}}
            <span>{{item.currency_code}}</span>
          </p>
        </div>
      </div>
      <div class="repayment-confirm-mid-bottom">
        <p>还款资金扣除组合</p>
        <p class="repayment-right">
          <span v-for="(item,index) in groups" :key="item.currency">
            <span v-if="index">+</span>
            {{item.amount}} {{item.currency}}
          </span>
        </p>
      </div>
    </div>
    <div class="repayment-confirm-tips" v-if="showTips">
      <i class="tips-icon"></i>
      <p class="tips-cont">{{showText}}</p>
    </div>
    <div class="repayment-confirm-bottom">
      <div class="confirm-button" @click="confirm">
        <button type="button" class="btn btn-primary"></button>
        <span>确认还款</span>
      </div>
    </div>
    <Keyboard
      v-if="showKeyboard"
      type="repayment"
      title="密码支付"
      label="请输入支付密码"
      :params="params"
      @success="success"
      @close="showKeyboard = false"
    />
  </div>
</template>

<script>
import Keyboard from "~/components/Keyboard";

export default {
  components: {
    Keyboard
  },
  data: function() {
    return {
      showTips: false,
      showKeyboard: false,
      check_repayment_group_data: null,
      current_repayment_group: {
        code: 0,
        msg: "OK",
        data: {
          state: "1"
        }
      },
      tips1:
        "恭喜当前还款组合够还清已出账单，还款剩余金额将退回原账户；考虑到汇率实时变动，结果以实际为准。",
      tips2:
        "恭喜当前还款组合够还清未出账单，还款剩余金额将退回原账户；考虑到汇率实时变动，结果以实际为准。",
      tips3:
        "当前还款组合不够还清已出账单，您可调试后再试或继续还款；考虑到汇率实时变动，结果以实际为准。",
      tips4:
        "当前还款组合不够还清未出账单，您可调试后再试或继续还款；考虑到汇率实时变动，结果以实际为准。",
      params: {},
      group: []
    };
  },
  computed: {
    groups() {
      // amount: "48.2526",
      // currency_code: "CNY"
      if (this.group.length > 0) return this.group;
      return this.$store.state.wealthLeShell.repayment_data_groups;
    },
    repayment_data() {
      return this.$store.state.wealthLeShell.repayment_data;
    },
    showText() {
      let _str = "";
      if (this.repayment_data.data.bills.type == "1") {
        if (this.current_repayment_group.data.state == "1") {
          _str = this.tips1;
        } else {
          _str = this.tips3;
        }
      } else {
        if (this.current_repayment_group.data.state == "1") {
          _str = this.tips2;
        } else {
          _str = this.tips4;
        }
      }
      return _str;
    },
    list() {
      // [
      //   {
      //     amount: "48.2526",
      //     display_amount: "¥48.2526",
      //     name: "人民币",
      //     currency_code: "CNY",
      //     symbol: "¥"
      //   }
      // ]
      if (this.check_repayment_group_data)
        return this.check_repayment_group_data;
      return this.repayment_data.data.bills.list;
    }
  },
  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
    }
  },
  beforeRouteUpdate(to, from, next) {
    // react to route changes...
    // don't forget to call next()
  },
  mounted() {
    // return; //test
    this.group = this.$route.query.cash;
    (async () => {
      await this.check_repayment_group();
    })();
  },
  methods: {
    async check_repayment_group() {
      let str = JSON.stringify(this.group);
      let { data: rs } = await this.$axios.post(
        "?ct=api&ac=check_repayment_group",
        { group: str }
      );
      console.log("check_repayment_group");
      console.log(rs);
      this.current_repayment_group = rs;
      this.showTips = true;
      if (rs.code == 0) {
        this.check_repayment_group_data = rs.data.repayment_group;
        if (rs.data.state) {
        }
      } else {
        this.$toast(rs.msg);
      }
    },
    async repayment() {
      let { data: rs } = await this.$axios.post("?ct=api&ac=repayment", {
        // pay_password:
        type: 1,
        capital_group: this.group
      });
      //if (!Array.isArray(data) || data.length < 1) {
      //   this.$toast(rs.msg);
      //   return;
      // }
      if (rs.code == 0) {
        this.$router.push("/WealthLeShellRepaymentConfirmDone");
      } else {
        this.$toast(rs.msg);
      }
    },
    repaymentConfirmBack() {
      this.$router.go(-1);
    },
    confirm() {
      this.params = {
        type: 1,
        capital_group: this.group
      };
      this.showKeyboard = true;
      // this.repayment();
      // this.$router.push("/WealthLeShellRepaymentConfirmDone");
    },
    success() {
      // this.$router.push("/WealthLeShellRepaymentConfirmDone");
      this.$router.push({
        path: "/WealthLeShellRepaymentConfirmDone",
        query: { cash: this.group }
      });
    }
  }
};
</script>

<style scoped>
.repayment-confirm {
  overflow: hidden;
  color: rgb(41, 41, 41);
}
.repayment-confirm-top {
  /* height: 88px; */
  font-family: "PingFangSC-Medium";
  font-size: 36px;
  background-color: #fff;
}
.repayment-confirm-top i {
  margin-left: 30px;
  margin-top: 25px;
  position: absolute;
  width: 21px;
  height: 38px;
  background: url("~assets/img/black_blue@2x.png") no-repeat;
  background-size: 21px 38px;
}
.repayment-confirm-top p {
  line-height: 88px;
  text-align: center;
}

.repayment-confirm-mid {
  /* margin-top: 32px;
  height: 374px; */
  background-color: #fff;
}
.repayment-confirm-mid-top {
  /* height: 240px; */
}
.repayment-confirm-mid-top h4 {
  padding-top: 70px;
  font-size: 28px;
  text-align: center;
  color: #999999;
  font-family: "PingFangSC-Regular";
}

.repayment-tab h4 {
  font-family: "PingFangSC-Regular";
  font-size: 36px;
  color: #999999;
}

.repayment-groups {
  text-align: center;
  color: rgb(41, 41, 41);
  font-size: 60px;
  font-family: "SFUIDisplay-Medium";
}
.repayment-groups:first-child {
  padding-top: 30px;
}
.repayment-groups:first-child p {
}
.repayment-groups p {
  padding-top: 20px;
  font-size: 60px;
}
.repayment-groups p:first-child {
  padding-top: 30px;
}
.repayment-groups p span {
  font-size: 30px;
}
.repayment-confirm-mid-bottom {
  margin-top: 70px;
  padding-bottom: 30px;
}
.repayment-confirm-mid-bottom p {
  /* display: inline-block; */
  margin-left: 30px;
  font-family: "PingFangSC-Regular";
  font-size: 32px;
  color: #666;
}
.repayment-confirm-mid-bottom .repayment-right {
  /* float: right; */
  margin-right: 30px;
  color: rgb(41, 41, 41);
  font-size: 32px;
  font-family: "SFUIDisplay-Medium";
}

.repayment-confirm-tips {
  margin-top: 20px;
  margin-left: 30px;
  width: 690px;
  height: 114px;
  background-color: #fcf8eb;
  border-radius: 8px;
}
.repayment-confirm-tips .tips-icon {
  position: absolute;
  margin-left: 20px;
  margin-top: 42px;
  width: 30px;
  height: 30px;
  background: url("~assets/img/repayment_tips.png") no-repeat;
  background-size: 30px 30px;
}
.repayment-confirm-tips .tips-cont {
  padding-top: 24px;
  margin-left: 66px;
  margin-right: 10px;
  color: #d39b00;
  font-size: 24px;
  line-height: 32px;
  font-family: "PingFangSC-Regular";
}
.repayment-confirm-bottom {
}
.confirm-button {
  margin-top: 60px;
}
.confirm-button .btn-primary {
  display: inline-block;
  margin-left: 30px;
  width: 690px;
  height: 88px;
  background-color: rgb(32, 134, 249);
  border-radius: 8px;
  border: none;
}
.confirm-button span {
  position: absolute;
  width: 100%;
  left: 0;
  line-height: 88px;
  text-align: center;
  font-family: "PingFangSC-Regular";
  font-size: 36px;
  color: #fff;
}
</style>
